<script setup lang="ts">
import { useList } from '~comp-b/global-popups/invitation/hooks';
import BannerMp from '~/assets/imgs/invitation-spin/banner-mp.png';
import Banner from '~/assets/imgs/invitation-spin/banner1.png';

const bp = useAppBreakpoints();
const router = useRouter();
const { bonuses } = queries.useBonusesQuery();
const { currency, withdrawAmount, status } = useList();

const authed = useAuthed();
</script>

<template>
  <swiper-slide v-if="status?.available || bonuses?.invitespin" class="swiper-slide">
    <div class="swiper-slide__item relative w-full pb-28% lt-tablet:pb-39%" @click="router.push({ name: RN.INVITATION })">
      <img v-if="bp.tabletl" :src="Banner" alt="" class="absolute left-0 top-0 h-full w-full">
      <img v-else :src="BannerMp">
      <div class="swiper-slide__item-content">
        <div class="title">
          <I18nT keypath="l1jyYonJGsgqMNhhqcu" tab="p">
            <template #amount>
              <br>
              <TNum class="text-amber" :value="(status?.max_bonuses ?? 0)" />
            </template>
            <template #currency>
              {{ currency }}
            </template>
          </I18nT>
        </div>
        <AButton class="ant-cover__Button-3d-primary mt-5 lt-tablet:(my-1.1)" type="primary" @click="router.push({ name: RN.INVITATION })">
          {{ $t('vDpZjDPvqNlur2IktBvb7') }}
        </AButton>
      </div>
    </div>
  </swiper-slide>
</template>

<style scoped lang="scss">
@use './style.scss';
</style>
